<template>
  <div>
    <div id="home">
      <!-- 左边菜单 -->
      <div class="home-menu">
        <div class="home-text">问卷管理系统</div>
        <el-menu default-active="2" :style="containerHeight" class="menu">
          <menuTree :menuList="menuList"></menuTree>
        </el-menu>
        <div class="home-close"></div>
      </div>
      <!-- 头部信息 -->
      <div class="home-context">
        <div class="home-head">
          <div>
            <el-input class="dd" placeholder="搜索"></el-input>
          </div>
        </div>


        <!-- 内容 -->
        <div class="home-mian">
          <div class="table">
            <!-- 搜索 -->
            <div class="container_main">
              <el-select v-model="searchSelect" placeholder="地址" class="select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
              <el-input v-model="searchValue" placeholder="用户名" class="input"></el-input>
              <el-button type="primary" icon="el-icon-search" @click="lookUserInfo">搜索</el-button>
              <el-button type="primary" icon="el-icon-plus">新增</el-button>
            </div>

            <!-- 表格 -->
            <div class="user_Table">
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  fixed
                  prop="date"
                  label="日期"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="省份"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="市区"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="地址"
                  width="300">
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="邮编"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="caozuo"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import menuTree from "../components/menuTree.vue";
import cardmove from "../components/cardmove.vue";
export default {
  name: 'Home',
  components: {
    menuTree,
    cardmove
  },
  data() {
    return {
      searchSelect: "",
      searchValue: '',
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }],
      options: [{
        value: '选项1',
        label: '广东省'
      }, {
        value: '选项2',
        label: '海南省'
      }], 
      menuList: [
        {
          id: 1,
          parentid: '0',
          name: '系统主页',
          icon: 'HomeFilled',
          url: '/homepage',
        },
        {
          id: 6,
          parentid: '1',
          name: '课程管理',
          icon: 'List',
          url: '/course',
        },{
          id: 2,
          parentid: '2',
          name: '学生管理',
          icon: 'UserFilled',
          children: [
            {
              id: 3,
              parentid: '211',
              name: '信息管理',
              icon: '',
              children: [
                {
                  id: 4,
                  parentid: '212',
                  name: '密码修改',
                  icon: '',
                  url: '/password'
                }
              ]
            },
            {
              id: 5,
              parentid: '22',
              name: '成绩管理',
              icon: '',
              url: '/grade',
            }
          ]
        },
      ],
      containerHeight: {
        height :''
      }
      
    };
  },

  mounted() {
    this.getLoadEcharts();
  },

  created() {
    //动态调整左侧菜单栏高度
    var docHeight = document.documentElement.clientHeight;
    this.containerHeight.height = docHeight - 70 + "px";
  },


  methods: {
    lookUserInfo() { 
      var self = this;
      console.log('aaaaa ')
      var url = this.HOME + '/gettest';
      this.$axios({
        method: 'post',
        url: url,
      }).then(function (res) {
        console.log(res)
        if (res.data.code == '1') {
          self.$message({
            showClose: true,
            message: res.data.data,
            type: 'success'
          });
        } else {
          self.$message({
            showClose: true,
            message: res.data.msg ,
            type: 'error'
          });
        }
      });
    },
    getLoadEcharts() {}
  }

}
</script>

<style>

.menu{
  background: #4F68FF;
  border: 0px;
  
}


.menu-icon{
  color: #fff;
}
.menu-title {
  color: #fff;
}
 .home-context{ 
      width: 87%;
      float:right

  }
  .home-menu{
        position: fixed;
        top: 0;
        left: 0;
        min-height: calc(100vh - 130px);
  }
  .home-text{
        height: 50px;
        width: 240px;
        line-height: 50px;
        text-align: center;
        background: #3652ff;
        color: #ffff;
        border-radius: 0px 20px 0px 0px;
  }
.home-close{
    height: 50px;
    width: 240px;
    line-height: 50px;
    text-align: center;
    background: #3652ff;
    color: #ffff;
    border-radius: 0px 0px 20px 0px;
}
    .home-head {
      top: 0px;
      width: 100%;
      left: 241px;
      height: 50px;
      box-shadow: 4px 3px 7px rgb(0 0 0 / 9%), 0 0 0px rgb(0 0 0 / 0%);
    }
    .home-mian {
      position: absolute;
      left: 250px;
      right: 0;
      top: 70px;
      bottom: 0;
      padding-bottom: 30px;
      -webkit-transition: left .3s ease-in-out;
      transition: left .3s ease-in-out;
      background: #f0f0f0;
      
    }

    .table {
      background: #fff;
      height: 500px;
      margin: 20px;
    }

    .input {
      width: 300px;
    }

    .container_main {
      padding: 20px 0 0 20px;
    }

    .user_Table {
      padding: 20px;
    }

    .dd input{
        width: 227px;
        height: 30px;
        border-radius: 17px;
        margin-top: 10px;
        margin-left: 20px;
    }

 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 240px;
 }

 .container {
   width: 300px;
   height: 300px;
   margin-left: 30px;
 }

 #echart {
   width: 100%;
   height: 100%;
 }
</style>